<template>
	<view class="content bg-white">

	

		<cu-custom bgColor="bg-white" :isBack="true" textRight="true" type="custom-recuit">
			<block slot="backText">
				<view class="titilestyle">
					{{title}}
				</view>
			</block>
		</cu-custom>
		
		
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" height="80%"
			bottom='5%'>
			<view class="list flex justify-between flex-wrap">

				<view class="list-item  margin-top" v-for="(item,index) in list" :key="index"
					@click="jumpTo('./info?id='+item.video_id+'&type=video')">
					<view class="img-box middle">
						<image :src="item.logo" mode="aspectFill"></image>
						<view class="mask">

						</view>
						<text class="cuIcon-videofill"></text>
					</view>
					<view class="video-title padding-sm  text-cut">
						{{item.title}}
					</view>
				</view>

			</view>

		</mescroll-body>


	</view>
</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue" //下拉刷新 上拉加载组件
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"; //
	export default {
		mixins: [MescrollMixin],
		components: {
			MescrollBody
		},
		data() {
			return {
				title: "全部视频",
				list: [],
				videoId: -1,
				videoUrl: "",
				videoTitle: ""
			}
		},
		onLoad(option) {
			(option.shop_id) ? (() => {
				this.shop_id = option.shop_id;
			})() : (() => {
				uni.showModal({
					content: "未查询到对应信息",
					showCancel: false,
					success: () => {
						uni.navigateBack({
							delta: 1
						})
					}
				})

			})()
		},

		methods: {


			jumpTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			upCallback(page) {
				this.apiRequest('/buyer/SportVideo', {
					shop_id: this.shop_id,
					area_id: uni.getStorageSync('area_id'),
					page: page.num,
					limit: page.size,
				}, 0, 'get').then(res => {
					(res.code == 200) ? (() => {
						this.mescroll.endSuccess(res.data.data.length);
						if (page.num == 1) this.list = [];
						this.list = this.list.concat(res.data.data);
					})() : this.mescroll.endErr();
				}, e => {
					this.mescroll.endErr();
				})
			}

		}

	}
</script>

<style lang="scss">
	.content {
		min-height: 100vh;

		.list {
			width: calc(100vw*(670/750));
			margin-left: calc(100vw*(40/750));

			.list-item {

				width: calc(100vw*(325/750));
				min-height: calc(100vw*(217/750));
				.video-title{
					font-size: calc(100vw*(24/750));
					font-weight: 800;
					color: #333333;
				}
				

				.img-box {
					position: relative;
					width: inherit;
					border-radius: 20rpx;
					height: calc(100vw*(217/750));

					image {
						position: absolute;
						top: 0;
						z-index: 0;
						width: calc(100vw*(325/750));
						height: calc(100vw*(217/750));
						border-radius: 20rpx;

					}

					.mask {
						position: absolute;
						width: calc(100vw*(325/750));
						height: calc(100vw*(217/750));
						z-index: 1;
						top: 0;
						border-radius: 20rpx;
						background-color: rgba(59, 60, 69, 0.5);
					}

					.cuIcon-videofill {
						width:calc(100vw*(56/750)); 
						height: calc(100vw*(56/750));
						color: #29C26D;
						font-size: calc(100vw*(56/750));
						z-index: 2;
					}

				}

			}

		}
	}
</style>
